<template>
  <div class="SelectItemList">
    <el-row>
      <el-col :span="24">
        <dynForm :info-form="infoForm" :search-tags="searchTags" :select-list="selectList">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="doSearch"
          >
            {{ $t("search") }}</el-button
            >
        </dynForm>
      </el-col>
    </el-row>
    <div class="table-buttons">
      <el-button
        v-btnPermission:add
        type="primary"
        icon="el-icon-plus"
        @click="newAdd"
      >{{ $t("add") }}</el-button
      >
      <el-button
        v-btnPermission:edit
        :disabled="UpdateDisabled"
        type="primary"
        icon="el-icon-edit"
        @click="modify"
      >
        {{ $t("modify") }}</el-button
        >
      <el-button
        v-btnPermission:delete
        :disabled="DeleteDisabled"
        type="danger"
        icon="el-icon-delete"
        @click="doDelete"
      >{{ $t("delete") }}</el-button
      >
    </div>
    <!-- 表单部分 -->
    <el-card class="box-card" shadow="never">
      <el-row>
        <dynTable
          ref="dynTable"
          :loading="tableLoading"
          :table-data="tableData"
          :table-columns="tableColumns"
          :handle-selection-change="handleSelectionChange"
          :row-click="rowClick"
        />
      </el-row>
      <!--分页组件-->
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="getList"
      />
    </el-card>
    <!-- 新增修改详情弹窗 -->
    <addDialog
      ref="addDialog"
      :btn-show="btnShow"
      :form-disable="formDisable"
      @closeDialog="closeDialog"
      @initList="initList"
    />
  </div>
</template>
<script>
import mySetting from '@/mixins/mySetting'
import networkTips from '@/mixins/networkTips'
import eFormApi from '@/api/eForm/selectItemList'
import eFormCheckApi from '@/api/eForm/eFormCheck'
import addDialog from './components/addDialog'
export default {
  name: 'SelectItemList',
  components: { addDialog },
  mixins: [mySetting, networkTips],
  data() {
    return {
      infoForm: {},
      selectList: {
        isCheck: [{ name: '是', id: 1 }, { name: '否', id: 0 }]
      },
      searchTags: [
        { label: this.$t('formItem'), prop: 'itemName', tag: 'DynInput' },
        { label: this.$t('projectCategory'), prop: 'category', tag: 'DynSelect', translate: true },
        { label: this.$t('fieldType'), prop: 'dateType', tag: 'DynSelect', translate: true },
        { label: this.$t('belongTo'), prop: 'belongTo', tag: 'DynSelect', translate: true },
        { label: this.$t('application'), prop: 'apply', tag: 'DynSelect', translate: true },
        { label: this.$t('formWorkplaceResults'), prop: 'finalResult', tag: 'DynSelect', translate: true },
        { label: this.$t('whetherToCheckAutomatically'), prop: 'isCheck', tag: 'DynSelect' }
      ],
      tableColumns: [
        { prop: '', label: '', type: 'selection' },
        { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
          )
        } },
        { prop: 'itemName', label: this.$t('formItem') },
        { prop: 'itemGroup', label: this.$t('formGroup') },
        { prop: 'categoryView', label: this.$t('projectCategory'), templete: (_scope) => {
          return (
            <span>{ this.$t(_scope.row.categoryView) }</span>
          )
        } },
        { prop: 'dataTypeView', label: this.$t('fieldType'), templete: (_scope) => {
          return (
            <span>{ this.$t(_scope.row.dataTypeView) }</span>
          )
        } },
        { prop: 'dataSource', label: this.$t('dataType') },
        { prop: 'isCheck', label: this.$t('whetherToCheckAutomatically'), width: '120px', templete: (_scope) => {
          if (_scope.row.isCheck) {
            return (
              <div>是</div>
            )
          } else {
            return (
              <div>否</div>
            )
          }
        } },
        { prop: 'judgeTypeView', label: this.$t('judgeType'), templete: (_scope) => {
          return (
            <span>{ this.$t(_scope.row.judgeTypeView) }</span>
          )
        } },
        { prop: 'status', label: this.$t('iseffective'), templete: (_scope) => {
          return (
            <el-switch
              v-model={_scope.row.status}
              active-value={1}
              inactive-value={0}
              active-color='#13ce66'
              inactive-color='#ff4949'
              disabled/>
          )
        } },
        { prop: 'belongToView', label: this.$t('belongTo'), templete: (_scope) => {
          return (
            <span>{ this.$t(_scope.row.belongToView) }</span>
          )
        } },
        { prop: 'applyView', label: this.$t('application'), templete: (_scope) => {
          return (
            <span>{ this.$t(_scope.row.applyView) }</span>
          )
        } },
        { prop: 'createTime', label: this.$t('createTime'), width: '200px' },
        { prop: '', label: this.$t('details'), fixed: 'right', templete: (_scope) => {
          return (
            <el-button type='text' size='small' on-click={() => this.scopedHandle(_scope.row)}>{
              this.$t('details')
            }</el-button>
          )
        } }
      ],
      tableLoading: true,
      multipleSelection: [],
      UpdateDisabled: true,
      DeleteDisabled: true,
      formDisable: false,
      btnShow: true
    }
  },
  computed: {},
  created() {
    this.initList()
    this.getCategoryList()
    this.getFormDataType()
    this.getBelongTo()
    this.getApplyList()
    this.getFinalResultList()
  },
  mounted() {},
  methods: {
    // 初始化
    async initList() {
      const res = await eFormApi.getList(this.$clearNull({ ...this.infoForm, ...this.listQuery }))
      this.tableData = res.data
      this.total = res.total
      this.tableLoading = false
    },
    // 新增打开弹窗
    newAdd() {
      this.$refs.addDialog.openDialog()
    },
    // 编辑按钮
    modify() {
      this.formDisable = false
      this.btnShow = true
      this.$refs.addDialog.openDialog(this.multipleSelection[0].id)
    },
    // 删除
    doDelete() {
      this.$confirm(
        `${this.$t('confirmDelete')}${this.multipleSelection.length}${this.$t(
          'recordCount'
        )}?`,
        this.$t('tip'),
        {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }
      ).then(() => {
        const ids = this.multipleSelection.map((ele) => ele.id)
        eFormApi.doDelete({ ids }).then((res) => {
          this.netTips(res, this.setOnePage, this.initList)
        })
      })
    },
    // 表单项类型
    async getCategoryList() {
      const res = await eFormCheckApi.getCategoryList({ type: 'item' })
      this.$set(this.selectList, 'category', res.data)
    },
    // 数据类型
    async getFormDataType() {
      const res = await eFormApi.getFormDataType()
      this.$set(this.selectList, 'dateType', res.data)
    },
    // 归属
    async getBelongTo() {
      const res = await eFormApi.getBelongTo()
      this.$set(this.selectList, 'belongTo', res.data)
    },
    // 应用
    async getApplyList() {
      const res = await eFormApi.getApply()
      this.$set(this.selectList, 'apply', res.data)
    },
    // 点检表结果
    async getFinalResultList() {
      const res = await eFormApi.getFinalResult()
      this.$set(this.selectList, 'finalResult', res.data)
    },
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    // 查看详情
    scopedHandle(row) {
      this.formDisable = true
      this.btnShow = false
      this.$refs.addDialog.openDialog(row.id)
    },
    handleSelectionChange(row) {
      this.multipleSelection = row
    },
    rowClick(row) {
      this.$refs.dynTable.$refs.multipleTable.toggleRowSelection(row)
    },
    // 切换分页
    getList(val) {
      this.listQuery = val
      this.initList()
    },
    closeDialog() {
      this.formDisable = false
      this.btnShow = true
    }
  }
}
</script>
<style lang='scss' scoped>
@import "~@/assets/styles/defaultStyle.scss";
// .SelectItemList .el-row:nth-child(1) {
//   padding-bottom: 0;
// }
// ::v-deep .el-form {
//   .el-form-item:last-child {
//     margin: 0 0 15px 0;
//   }
// }
</style>
